<LayoutTableSmall>
    <!-- 顶部 -->
    <template slot="top"></template>
    <!-- 其他 -->
    <template slot="other"></template>
    <!-- 搜索 -->
    <template slot="function">
        <el-form :inline="true" label-position="left" label-width="80px" :model="mixinTable_tableSearchData">
            <!--<el-form-item>
                <el-input clearable v-model="mixinTable_tableSearchData.name" placeholder="请输入商品名称"
                          @change="mixinTable_searchData" style="width:190px">
                    <el-button slot="append" icon="el-icon-search" @click="mixinTable_searchData()"></el-button>
                </el-input>
            </el-form-item>-->

            <el-form-item>
                <el-select v-model="mixinTable_tableSearchData.commentContextType" @change="mixinTable_searchData"
                    clearable placeholder="评论内容" style="width:100px">
                    <el-option label="仅文字" value="0"></el-option>
                    <el-option label="有图" value="1"></el-option>
                    <el-option label="有视频" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select v-model="mixinTable_tableSearchData.isReply" @change="mixinTable_searchData" clearable
                    placeholder="回复类型" style="width:100px">
                    <el-option label="未回复" value="0"></el-option>
                    <el-option label="已回复" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select v-model="mixinTable_tableSearchData.commentLevel" @change="mixinTable_searchData" clearable
                    placeholder="评论等级" style="width:100px">
                    <el-option label="一级" value="1"></el-option>
                    <el-option label="二级" value="2"></el-option>
                    <el-option label="三级" value="3"></el-option>
                    <el-option label="四级" value="4"></el-option>
                    <el-option label="五级" value="5"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-popover width="180" trigger="click" @show="showSearchSeniorBox">
                    <div class="optionSearch" v-loading="searchSeniorLoading<5">
                        <el-form label-position="left" label-width="80px" :model="mixinTable_tableSearchSenior">
                            <div class="box">
                                <el-form-item label="精选类型:">
                                    <el-select v-model="mixinTable_tableSearchData.isSelected"
                                        @change="mixinTable_searchData" clearable placeholder="精选类型"
                                        style="width:100px">
                                        <el-option label="未精选" value="0"></el-option>
                                        <el-option label="已精选" value="1"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="评论方式:">
                                    <el-select v-model="mixinTable_tableSearchData.commentType"
                                        @change="mixinTable_searchData" clearable style="width:100px">
                                        <el-option label="自动" value="0"></el-option>
                                        <el-option label="主动" value="1"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="评论状态:">
                                    <el-select v-model="mixinTable_tableSearchData.isShow"
                                        @change="mixinTable_searchData" clearable style="width:100px">
                                        <el-option label="已隐藏" value="0"></el-option>
                                        <el-option label="未隐藏" value="1"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="配送等级:">
                                    <el-select v-model="mixinTable_tableSearchData.deliveryLevel"
                                        @change="mixinTable_searchData" clearable style="width:100px">
                                        <el-option label="一级" value="1"></el-option>
                                        <el-option label="二级" value="2"></el-option>
                                        <el-option label="三级" value="3"></el-option>
                                        <el-option label="四级" value="4"></el-option>
                                        <el-option label="五级" value="5"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="服务等级:">
                                    <el-select v-model="mixinTable_tableSearchData.serviceLevel"
                                        @change="mixinTable_searchData" clearable style="width:100px">
                                        <el-option label="一级" value="1"></el-option>
                                        <el-option label="二级" value="2"></el-option>
                                        <el-option label="三级" value="3"></el-option>
                                        <el-option label="四级" value="4"></el-option>
                                        <el-option label="五级" value="5"></el-option>
                                    </el-select>
                                </el-form-item>
                            </div>

                        </el-form>
                    </div>
                    <el-button slot="reference">其它筛选</el-button>
                </el-popover>
            </el-form-item>
        </el-form>
    </template>
    <!-- 表格 -->
    <template slot="table">
        <!--{{mixinTable_selectTableData}}-->
        <el-table v-loading="mixinTable_loading" :data="mixinTable_tableData" border style="width: 100%;" 
            :ref="mixinPage_vueName+'TableSmall'" height="100%"
            @selection-change="mixinTable_handleSelectionChangeTableSmall">
            <el-table-column type="selection" width="50" align="center"></el-table-column>
            <el-table-column type="index" width="50" :index="mixinTable_indexMethod" align="center" label="#">
            </el-table-column>


            <el-table-column prop="name" label="商品信息" width="240">
                <template slot-scope="scope">


                    <div class="goods">
                        <div class="albumUrl">
                            <imageBox :src="scope.row.albumUrl"></imageBox>
                        </div>

                        <div class="text">
                            <div class="name">{{scope.row.productName}}</div>
                            <div class="des">
                                <div v-if="scope.row.spData">
                                    {{ JSON.parse(scope.row.spData).textString }}</div>
                                <div v-else>无规格</div>
                            </div>
                        </div>
                    </div>

                </template>
            </el-table-column>
            <el-table-column prop="content" label="评论内容">
                <template slot-scope="scope">

                    <div class="content">
                        <!-- 用户评论 -->
                        <div class="item">
                            <div class="hh">
                                <div class="user">
                                    <el-popover placement="right" width="300" trigger="hover">
                                        <div class="userBox">
                                            <div class="albumUrl">
                                                <imageBox :src="scope.row.icon"></imageBox>
                                            </div>
                                            <div class="text">
                                                <div class="name">{{scope.row.nickName}}</div>
                                                <div class="des" v-if="scope.row.mobile"><span
                                                        class="el-icon-mobile-phone"
                                                        style="margin-right:3px;"></span>{{scope.row.mobile}}</div>
                                            </div>
                                        </div>
                                        <div class="show" slot="reference">
                                            <div class="img">
                                                <imageBox :src="scope.row.icon"></imageBox>
                                            </div>
                                            <div class="name">{{scope.row.nickName}}</div>
                                        </div>
                                    </el-popover>

                                </div>
                                <div class="time">评论时间：{{scope.row.updatedTimeStr}}</div>
                            </div>
                            <div class="mm">
                                <div class="msg">{{scope.row.content || "无内容"}}</div>
                                <div class="imgList" v-if="!$vFN.Utils.isEmpty(scope.row.imageUrlLst)">
                                    <div class="li" v-for="(item,index) in scope.row.imageUrlLst">
                                        <el-popover placement="top" width="400" trigger="hover">
                                            <imageBox :src="item"></imageBox>
                                            <div class="img1" slot="reference">
                                                <imageBox :src="item"></imageBox>
                                            </div>
                                        </el-popover>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <!-- 回复内容 -->
                        <div class="item" v-for="(item,index) in scope.row.commentReplayLst" :key="index">
                            <div class="hh">
                                <div class="user">
                                    <div class="show" >
                                        <div class="name">商家回复</div>
                                    </div>

                                </div>
                                <div class="time">回复时间：{{item.createdTimeStr}}</div>
                            </div>
                            <div class="mm">
                                <div class="msg">{{item.content || "无内容"}}</div>
                                <div class="imgList" v-if="!$vFN.Utils.isEmpty(item.imageUrlLst)">
                                    <div class="li" v-for="(iitem,iindex) in item.imageUrlLst" :key="iindex"> 
                                        <el-popover placement="top" width="400" trigger="hover">
                                            <imageBox :src="iitem"></imageBox>
                                            <div class="img1" slot="reference">
                                                <imageBox :src="iitem"></imageBox>
                                            </div>
                                        </el-popover>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="rate">
                        <div class="li">
                            <el-tag size="mini" :type="rateType(scope.row.commentLevel)">
                                商品评分：{{scope.row.commentLevel}}分
                            </el-tag>
                        </div>
                        <div class="li">
                            <el-tag size="mini" :type="rateType(scope.row.serviceLevel)">
                                服务评分：{{scope.row.serviceLevel}}分
                            </el-tag>
                        </div>
                        <div class="li">
                            <el-tag size="mini" :type="rateType(scope.row.deliveryLevel)">
                                配送评分：{{scope.row.deliveryLevel}}分
                            </el-tag>
                        </div>
                    </div>

                </template>
            </el-table-column>




            <el-table-column label="操作" width="150" align="center">
                <template slot-scope="scope">
                    <el-tooltip ceffect="dark" :content="scope.row.isSelected === 0 ? '设为精选' : '取消精选'" placement="top">
                        <el-button @click="setComment(scope.row)" icon="iconfont icon-agree-fill" circle plain
                            :type="scope.row.isSelected === 0 ? '' : 'warning'">
                        </el-button>
                    </el-tooltip>

                    <el-tooltip ceffect="dark" :content="scope.row.isShow === 0 ? '取消隐藏' : '隐藏'" placement="top">
                        <el-button @click="hideComment(scope.row)" icon="el-icon-view" circle plain
                            :type="scope.row.isShow === 0 ? 'danger' : ''">
                        </el-button>
                    </el-tooltip>
                    <el-tooltip ceffect="dark" content="回复" placement="top">
                        <el-button @click="editBoxOpen(scope.row)" icon="iconfont icon-community-fill" circle>
                        </el-button>
                    </el-tooltip>
                </template>
            </el-table-column>

        </el-table>

    </template>
    <!-- 表格选项 -->
    <template slot="options">
        <el-button :disabled="mixinTable_selectTableData.length<=0" @click="setAllComment()">设为精选</el-button>
        <el-button :disabled="mixinTable_selectTableData.length<=0" @click="cancelSetAllComment()">取消精选</el-button>
        <el-button :disabled="mixinTable_selectTableData.length<=0" @click="hideAllComment ()">隐藏已选</el-button>
        <el-button :disabled="mixinTable_selectTableData.length<=0" @click="cancelHideAllComment ()">取消隐藏</el-button>
    </template>
    <!-- 分页 -->
    <template slot="page">
        <el-pagination class="paginationStyle" v-if="mixinTable_pageData.total>0" background
            @current-change="mixinTable_pagingData($event)" :current-page="mixinTable_pageData.pageNum"
            :page-size.sync="$vFN.Constants.pageSize" layout="total, prev, pager, next,jumper"
            :total.sync="mixinTable_pageData.total">
        </el-pagination>
    </template>
</LayoutTableSmall>